<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>洪静萍个人简历</title>
	<link rel="stylesheet" href="./js/fullPage.js-master/jquery.fullPage.css">
	<link rel="stylesheet" href="./css/animate.min.css">
	<link rel="stylesheet" href="./css/index01.css">
</head>
<body>
<nav>
	<div class="nav_wrap clearfix">
		<div class="nav_wrap_left">
			<a href="#">Welcome</a>
		</div>
		<div class="nav_wrap_right">
			<ul>
				<li><a href="#page01">首页</a></li>
				<li><a href="#page02">关于我</a></li>
				<li><a href="#page03">技能</a></li>
				<li><a href="#page04">经验</a></li>
				<li><a href="#page05">联系我</a></li>
			</ul>
		</div>
	</div>
</nav>
	<div id="fullPage">
		<!-- 第一屏 -->

		<section class="section first" id="page1">
			<div class="cen_con">
				<div class="con_top">
					<img src="./image/portrait1.jpg" alt="">
				</div>
				<div class="con_bottom">
					<h2>世界上只有想不通的人，没有走不通的路</h2>
					<hr>
					<h3>洪静萍</h3>
					<h3>web前端工程师</h3>
					<h3>求职上海</h3>
				</div>
			</div>
			<div></div>

		</section>
		<!-- 第二屏 -->
		<section class="section second" id="page2">
			<div class="con_wrap">
				<div class="tit_wrap">
					<h1>关于我</h1>
					<!--水平分割线-->
					<div class="hr">
						<span></span>
					</div>
					<h2>如果debugging是一种消灭bug的过程，那编程就一定是把bug放进去的过程</h2>
				</div>
				<div class="con_info">
					<div class="con_info_l">
						<img src="./image/portrait1.jpg" alt="">
					</div>
					<div class="con_info_c">
						<ul class="mymsg">
							<li>姓名 | 洪静萍</li>
							<li>性别 | 女</li>
							<li>出生 | 1990.11.08</li>
							<li>学历 | 本科</li>
							<li>学校 | 河海大学文天学院</li>
							<li>现居 | 上海</li>
						</ul>
					</div>
					<div class="con_info_r">
						<ul class="mymsg">
							<li>手机 | 15618394019</li>
							<li>邮箱 | hjpChinash@163.com</li>
							<li>Q   Q | 1249716331</li>
							<li>经验 | 3年</li>
							<li>英语 | CET6</li>
							<li>意向 | web前端工程师</li>
						</ul>
					</div>
				</div>
			</div>
		</section>
		<!-- 第三屏 -->
		<section class="section third" id="page3">
			<div class="con_wrap">
				<div class="tit_wrap">
					<h1>技能</h1>
					<!--水平分割线-->
					<div class="hr">
						<span></span>
					</div>
					<h2>代码，我们眼中的世界，别人眼中的天书</h2>
				</div>
				<div class="con_info">
					<div class="con_info_l">
						<canvas width="600" height="400" id="demo"></canvas>
					</div>
					<div class="con_info_r">
						<div class="info_r_content " id="myskills">
							<p>1. 熟练使用HTML+CSS，准确还原设计图；</p>
							<p>2. 熟练掌握原生的JavaScript进行页面的动态效果制作；</p>
							<p>3. 熟练H5新标签、CSS3新特性，运用H5+CSS3+canvas制作图形和动画效果；</p>
							<p>4. 熟练使用bootstrap,jQueryUI等框架；</p>
							<p>5. 熟悉Ajax异步通信技术，利用JSONP解决跨域问题，与后台数据交互；</p>
							<p>6. 了解前端框架AngularJS,以及git常用的操作流程；</p>
							<p>7. 了解简单的PHP代码，了解SEO优化，以及代码书写规范；</p>
							<p>8. 熟练使用sublime、webStorm、Hbuilder等开发工具；</p>
							<p>9. 能够使用github进行代码管理，熟练使用markdown文档，有道云笔记。</p>
						</div>
					</div>
				</div>
			</div>
		</section>
		<!-- 第四屏 -->
		<section class="section fourth" id="page4">
			<div class="con_wrap">
				<div class="tit_wrap">
					<h1>工作经验</h1>
					<!--水平分割线-->
					<div class="hr">
						<span></span>
					</div>
					<h2>现在我做的一切仅仅是为了不让未来的自己后悔</h2>
				</div>
				<div class="con_info">
					<div class="con_info_content">
						<div class="info_content_l">
							<div class="content_l_img"><span>万事达</span></div>
						</div>
						<div class="info_content_r">
							<div class="info_content_r_top">
								<div class="trangle"></div>
								<div class="content_r_top_cntent">
									<div class="content_r_top_cntent">
										<h3>2013.07 － 2016.09  山东万事达建筑钢品股份有限公司 | Web 前端开发工程师</h3>
										<h4>工作描述：</h4>
										<p>1. 主要负责网站页面制作（HTML+CSS），配合后台开发人员实现数据交互；</p>
										<p>2. 负责各种功能的的实现；</p>
										<p>3. 参与移动产品和项目制作，配合后台开发人员实现产品前端界面效果与功能；</p>
										<p>4. 负责移动产品HTML5、CSS3的编写，解决移动端适配问题；</p>
										<p>5. 实现产品UI和交互方面的开发需求，确保产品具有优质的用户使用体验</p>
										<p>6. 网站后期的维护</p>
									</div>
								</div>
							</div>
							<div class="info_content_r_center">
								<div class="trangle"></div>
								<div class="content_r_top_cntent">
									<div class="content_r_top_cntent">
										<h3>项目一</h3>
										<h4>项目名称：山东万事达钢品建筑股份有限公司	</h4>
										<h5>项目描述：</h5>
										<p>开发的是自己公司的门户网站。通过HTML+CSS实现页面的外观；通过	JavaScript+jQuery实现网页的轮播图；通过bootstrap实现二级页面产品展示；
											通过C3实现 <br> 页面的动画部分。</p>
										<h5>项目职责：</h5>
										<p>1.	本人负责首页、二级页面“关于我们”、“注册页面”、“新闻中心”、“联系我们”、还有子公司的展示页面的静态页面的制作，<br>包括页面中的javascript 和 jquery</p>
										<p>项目地址：http://www.600.com.cn（PC端）</p>
									</div>
								</div>
							</div>
							<div class="info_content_r_bottom">
								<div class="trangle"></div>
								<div class="content_r_top_cntent">
									<div class="content_r_top_cntent">
										<h3>项目二</h3>
										<h4>项目名称：***电商平台（PC端）</h4>
										<h5>项目周期：2016年5月至今</h5>
										<h5>项目描述:</h5>
										<p>公司正在开发电商交易平台，上面有本公司经营的各种产品的展示，以及会定期对一些产品进行优惠活动，向客户介绍每个不同品种的产品的详细信息。</p>
										<h5>项目职责：</h5>
										<p>1.按照需求分析文档，对项目进行工期规划;2.页面布局与图片处理;3.模块化功能设计;4.运用JavaScript、
											jQuery实现页面基本效果;5.使用 <br>animate.css运动框架实现图片的动态效果。</p>
										<p>本人主要负责制作前端页面，交互特效，该项目日前还未上线。</p>
										<!--<h5>主要技术：</h5>-->
										<!--<p>1.运用Fireworks对图片素材进行剪切；</p>-->
										<!--<p>2.DIV+CSS页面传统布局；</p>-->
										<!--<p>3.运用CSS Sprite技术，减少HTTP请求，提高浏览器加载速度；</p>-->
										<!--<p>4.运用JavaScript原声代码实现页面效果，如banner切换、图片放大、回到顶部、-->
										<!--滑动经过固定至顶部等效果；</p>-->
										<!--<p> 5.运用JavaScript 对页面DOM进行操作；</p>-->
										<!--<p> 6.运用JavaScript 实现表单验证；</p>-->
										<!--<p> 7.解决IE、Mozilla Firefox、Chrome、Safari、Opera等主流浏览器的兼容性问题；</p>-->
										<!--<p> 8.使用Ajax技术读取后台数据，完成页面数据的读取；</p>-->
										<!--<p> 9.对页面结构，功能等进行优化；</p>-->
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>



			</div>
			<div class="img">
					<img src="./image/s03_print1.png" alt="">
				</div>
		</section>
		<!-- 第五屏 -->
		<section class="section fifth" id="page5">
			<div class="con_wrap">
				<div class="tit_wrap">
					<h1>联系我</h1>
					<!--水平分割线-->
					<div class="hr">
						<span></span>
					</div>
					<h2>耐得住寂寞，做得成大事</h2>
				</div>
				<div class="con_info">
					<div class="con_info_content">
						<ul>
							<li>
								<div class="msg">
									<span></span>
									<p>15618394019</p>
								</div>
							</li>
							<li>
								<div class="msg">
									<span> <img src="./image/yq0KA1UmP-KAY-VkAAAPFzCe7Nc253.png" alt=""></span>
									<p>1249716331</p>
								</div>

							</li>
							<li>
								<div class="msg">
									<span></span>
									<p>hjpChinash@163.com</p>
								</div>

							</li>
						</ul>
					</div>
					<div class="con_info_content_r">
						<!--<img src="./image/s02_print1.png" alt="">-->
					</div>
				</div>
			</div>
		</section>
	</div>
	<script src="js/jquery.min.js"></script>
	<script src="./js/jquery.fullpage.min.js"></script>
	<script src="./js/echarts.js"></script>
	<script>

		// 这里调用插件
		$('#fullPage').fullpage({
			// 简单配置插件
			navigation:true,
			navigationPosition:"right",
			navigationColor:'#000000',
			anchors: ['page01', 'page02', 'page03', 'page04',"page05"],
			navigationTooltips:['首页','关于我','技能','经验','联系我'],
			sectionsColor: ['#F15A24', 'pink', '#DE8910', '#16BA9D', 'pink'],
			afterLoad: function (a, k) {
				console.log(k);
				if(k==1){
						//第一屏执行特效
					$(".con_bottom").slideDown(3000);

				}
				if(k==2){
					$(".con_info .con_info_c").show(1000);
					$(".con_info .con_info_r").show(1000);
					$(".mymsg").find("li").each(function(i){
						$(this).mousemove(function(){
							$(this).addClass("animated bounce")
						});
						$(this).mouseout(function(){
							$(this).removeClass("animated bounce")
						})
					})
				}
				if(k==3){
					//第三屏文字特效
					$("#myskills").find("p").each(function(i){
						$(this).mousemove(function(){
							$(this).addClass("animated pulse")
						});
						$(this).mouseout(function(){
							$(this).removeClass("animated pulse")
						})
					});
					var canvas = document.querySelectorAll( '#demo' )[ 0 ];
					var context = canvas.getContext( '2d' );
					var data = [
						{ color: 'red', range: [ 0, 85 ] },
						{ color: 'green', range: [ 85, 165 ] },
						{ color: 'blue', range: [ 165, 230 ] },
						{ color: 'gray', range: [ 230, 280 ] },
						{ color: 'orange', range: [ 280, 320 ] },
						{ color: 'purple', range: [ 320, 360 ] }
					];
					var res = ["HTML5","CSS3","JavaScript","jQuery","BootStrap","AngularJS"];
					var x = canvas.width / 2;
					var y = canvas.height / 2;
					var r = 150;
					var angleStart = -90;
					var tor = function ( angle ) {
						return Math.PI * angle / 180;
					};
					var distance = 20;
					var angleStart = -90;
					var angleSpeed = 2;
					var angle = 0;
					var angleHistory;
					var id = setInterval(function () {
						canvas.width = canvas.width;
						// 从 0 绘制到 angle 所在的角度
						angle += angleSpeed;
						if ( angle >= 360 ) {
							angle = 360;
							clearInterval( id );
							document.title = ' over ';
						}
						var angleEnd;
						for ( var i = 0; i < data.length; i++ ) {
							// 判断绘制
							context.beginPath();
							context.moveTo( x, y );
							context.fillStyle = data[ i ].color;
							if ( angle >= data[ i ].range[ 0 ] && angle < data[ i ].range[ 1 ] ) {
								angleEnd = angle;
							} else {
								angleEnd = data[ i ].range[ 1 ];
							}
							var txt_x = x + ( r + distance ) * Math.cos(
											tor ( angleStart + data[ i ].range[ 0 ] + ( angleEnd - data[ i ].range[ 0 ] ) / 2 )
									);
							var txt_y = y + ( r + distance ) * Math.sin(
											tor ( angleStart + data[ i ].range[ 0 ] + ( angleEnd - data[ i ].range[ 0 ] ) / 2 )
									);
							// 设置对齐方式
							if ( txt_x > x ) {
								context.textAlign = 'left';
							} else {
								context.textAlign = 'right';
							}
							if ( txt_y > y ) {
								context.textBaseline = 'top';
							} else {
								context.textBaseline = 'bottom';
							}
							context.font="16px Arial";
							var index =i;
							context.fillText( res[ index ], txt_x, txt_y );
							context.arc( x, y, r, tor ( angleStart + data[ i ].range[ 0 ] ), tor ( angleStart + angleEnd ) );
							context.fill();

							if ( angleEnd >= angle ) break;
						}
					}, 16.67);

				}

			 //给所有的都清掉.current
				$('.section').removeClass('current');

				// 只给当前加.current
				setTimeout(function () {
					// 延时执行
					$('.section').eq(k - 1).addClass('current');
				}, 100);
			}
		}
		 );




		/*canvas*/


	</script>

</body>
</html>